
<template>
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"               
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router= "true">
      <h3>{{isCollapse?'标题':'宿舍后台管理系统'}}</h3>

      <el-menu-item v-for="item in noChildren" :key="item.path" :index="item.path+''">
        <i :class="'el-icon-'+ item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>
   
      <el-submenu v-for="item in hasChildren" :key="item.path" :index="item.path+''">
        <template slot="title">
          <i :class="'el-icon-'+ item.icon"></i>
          <span slot="title">{{item.label}}</span>
        </template>
        
        <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
          <el-menu-item :index="subItem.path">{{subItem.label}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </template>
   
  <script>
  export default {
    name: "HelloWorld",
    props: {
      msg: String,
    },
    data() {
      return {
        menu: [
          {
            path: '/home',
            name: 'home',
            label: '首页',
            icon: 's-home',
            url: '..views/home.vue'
          },
          {
            path: '/orders',
            name: 'orders',
            label: '宿舍信息',
            url: '../views/Orders.vue'
          },
          {
            path: '/users',
            name: 'users',
            label: '学生管理',
            url: '../views/Users.vue'
          },
          {
           
            label: '宿舍评分',
            children: [
              {
                path: '/score',
                name: 'score',
                label: '评分',
                url: '../views/Score.vue'
              },
              ]
          }
        ]
      }
    },
    computed: {
      noChildren(){
        return this.menu.filter(item => !item.children)
      },
      hasChildren(){
        return this.menu.filter(item => item.children)
      },
      isCollapse(){
        return this.$store.state.isCollapse;
      }
    }
  }
  </script>
   

  <style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
    min-height: 100vh;
    border: none;
  }
  .el-menu {
     border: none;
  }
  .el-menu-item-group__title {
      padding: 0; 
  }
   
  h3{
      color: aliceblue;
      line-height: 30px; 
  }
   
  span,.el-menu-item{
    font-size: 16px;
  }
   
  </style>
